<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="icon" type="image/png" href="images/splash/android-chrome-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="196x196" href="images/splash/apple-touch-icon-196x196.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/splash/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/splash/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/splash/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/splash/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/splash/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/splash/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/splash/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/splash/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="57x57" href="images/splash/apple-touch-icon-57x57.png">
<link rel="icon" type="image/png" href="images/splash/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="images/splash/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="images/splash/favicon-16x16.png" sizes="16x16">
<link rel="shortcut icon" href="images/splash/favicon.ico" type="image/x-icon" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:900' rel='stylesheet' type='text/css'>

<title>Epsilon 5.0</title>

<link href="styles/style.css" rel="stylesheet" type="text/css">
<link href="styles/framework.css" rel="stylesheet" type="text/css">
<link href="styles/font-awesome.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/plugins.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
</head>

<body>
    
<div class="gallery-fix"></div>         <!-- Fix Gallery next/prev error on Android -->
<div class="sidebar-tap-close"></div>   <!-- Overlay for content to close Sidebar -->
<div class="sidebar-left-fix"></div>    <!-- The actual background of the Sidebar -->
<div class="sidebar-right-fix"></div>   <!-- The actual background of the Sidebar -->

<div class="header-fixed">
    <a href="#" class="header-icon-1 open-left-sidebar"><i class="fa fa-navicon"></i></a>
    <a href="index2.html" class="header-logo">BOLT</a>
    <a href="#" class="header-icon-2 open-right-sidebar"><i class="fa fa-envelope-o"></i></a>
</div>
    
<div class="sidebar-left">
    <div class="sidebar-scroll">
        <a href="#" class="sidebar-logo"></a>
        <div class="sidebar-decoration"></div>
        <div class="sidebar-menu">
            <a class="menu-item" href="index2.html"><!-- active-item -->
                <i class="fa fa-home"></i>
                Homepage
                <i class="fa fa-circle"></i>
            </a>
            <div class="has-submenu">
                <a class="menu-item open-submenu active-item" href="#"><!-- active-item -->
                    <i class="fa fa-cog"></i>
                    Features
                    <i class="fa fa-plus"></i>
                </a>
                <div class="submenu active-submenu"><!--active-submenu-->
                    <a class="menu-item active-item" href="features-typography.html">
                        <i class="fa fa-angle-right"></i>
                        Typography
                        <i class="fa fa-circle"></i>  
                    </a>                              
                    <a class="menu-item" href="features-tabs.html">
                        <i class="fa fa-angle-right"></i>
                         Tabs
                        <i class="fa fa-circle"></i>                        
                    </a>
                    <a class="menu-item" href="features-toggles.html">
                        <i class="fa fa-angle-right"></i>
                         Toggles
                        <i class="fa fa-circle"></i>                        
                    </a>                           
                    <a class="menu-item" href="features-accordion.html">
                        <i class="fa fa-angle-right"></i>
                        Accordions
                        <i class="fa fa-circle"></i>                        
                    </a>    
                    <a class="menu-item" href="features-notifications.html">
                        <i class="fa fa-angle-right"></i>
                        Notifications
                        <i class="fa fa-circle"></i>                        
                    </a>                                               
                    <a class="menu-item" href="features-charts.html">
                        <i class="fa fa-angle-right"></i>
                        Charts & Stats
                        <i class="fa fa-circle"></i>                        
                    </a>
                    <a class="menu-item" href="features-buttons.html">
                        <i class="fa fa-angle-right"></i>
                        Buttons & Icons
                        <i class="fa fa-circle"></i>  
                    </a>                        
                    <a class="menu-item" href="features-others.html">
                        <i class="fa fa-angle-right"></i>
                        Other Features
                        <i class="fa fa-circle"></i>                        
                    </a>
                </div>
            </div>          
            <div class="has-submenu">
                <a class="menu-item open-submenu" href="#"><!-- active-item -->
                    <i class="fa fa-camera"></i>
                    Galleries
                    <i class="fa fa-plus"></i>
                </a>
                <div class="submenu"><!--active-submenu-->
                    <a class="menu-item" href="gallery-round.html">
                        <i class="fa fa-angle-right"></i>
                        Rounded
                        <i class="fa fa-circle"></i>  
                    </a>                    
                    <a class="menu-item" href="gallery-square.html">
                        <i class="fa fa-angle-right"></i>
                        Squared
                        <i class="fa fa-circle"></i>  
                    </a>                                           
                    <a class="menu-item" href="gallery-adaptive.html">
                        <i class="fa fa-angle-right"></i>
                        Adaptive
                        <i class="fa fa-circle"></i>                        
                    </a>                        
                    <a class="menu-item" href="gallery-masonry.html">
                        <i class="fa fa-angle-right"></i>
                         Masonry
                        <i class="fa fa-circle"></i>                        
                    </a>                        
                    <a class="menu-item" href="gallery-filter.html">
                        <i class="fa fa-angle-right"></i>
                        Filterable
                        <i class="fa fa-circle"></i>                        
                    </a>                        
                </div>
            </div>          
            <div class="has-submenu">
                <a class="menu-item open-submenu" href="#"><!-- active-item -->
                    <i class="fa fa-image"></i>
                    Portfolios
                    <i class="fa fa-plus"></i>
                </a>
                <div class="submenu"><!--active-submenu-->
                    <a class="menu-item" href="portfolio-one.html">
                        <i class="fa fa-angle-right"></i>
                        One Item
                        <i class="fa fa-circle"></i>  
                    </a>                    
                    <a class="menu-item" href="portfolio-two.html">
                        <i class="fa fa-angle-right"></i>
                        Two Items
                        <i class="fa fa-circle"></i>  
                    </a>                                           
                    <a class="menu-item" href="portfolio-filter.html">
                        <i class="fa fa-angle-right"></i>
                        Filterable
                        <i class="fa fa-circle"></i>                        
                    </a>                        
                    <a class="menu-item" href="portfolio-adaptive.html">
                        <i class="fa fa-angle-right"></i>
                         Adaptive
                        <i class="fa fa-circle"></i>                        
                    </a>                        
                    <a class="menu-item" href="portfolio-widescreen.html">
                        <i class="fa fa-angle-right"></i>
                        Widescreen
                        <i class="fa fa-circle"></i>                        
                    </a>                        
                </div>
            </div>
            <div class="has-submenu">
                <a class="menu-item open-submenu" href="#"><!-- active-item -->
                    <i class="fa fa-file-o"></i>
                    Pages
                    <i class="fa fa-plus"></i>
                </a>
                <div class="submenu"><!--active-submenu-->
                    <a class="menu-item" href="page-activity.html">
                        <i class="fa fa-angle-right"></i>
                        Activity
                        <i class="fa fa-circle"></i>  
                    </a>                    
                    <a class="menu-item" href="page-error.html">
                        <i class="fa fa-angle-right"></i>
                        Error Page
                        <i class="fa fa-circle"></i>  
                    </a>                                           
                    <a class="menu-item" href="page-soon.html">
                        <i class="fa fa-angle-right"></i>
                        Soon Page
                        <i class="fa fa-circle"></i>                        
                    </a>                        
                    <a class="menu-item" href="page-profile.html">
                        <i class="fa fa-angle-right"></i>
                         Profile Page
                        <i class="fa fa-circle"></i>                        
                    </a>     
                    <a class="menu-item" href="page-login.html">
                        <i class="fa fa-angle-right"></i>
                        Log In Page
                        <i class="fa fa-circle"></i>                        
                    </a>
                    <a class="menu-item" href="page-signup.html">
                        <i class="fa fa-angle-right"></i>
                        Sign Up Page
                        <i class="fa fa-circle"></i>                        
                    </a>                                                 
                    <a class="menu-item" href="page-userlist.html">
                        <i class="fa fa-angle-right"></i>
                        Userlist Page
                        <i class="fa fa-circle"></i>                        
                    </a>                        
                    <a class="menu-item" href="page-reviews.html">
                        <i class="fa fa-angle-right"></i>
                        User Reviews
                        <i class="fa fa-circle"></i>                        
                    </a>                        
                </div>
            </div>             
            <div class="has-submenu">
                <a class="menu-item open-submenu" href="#"><!-- active-item -->
                    <i class="fa fa-mobile"></i>
                    App Pages
                    <i class="fa fa-plus"></i>
                </a>
                <div class="submenu"><!--active-submenu-->
                    <a class="menu-item" href="pageapp-chat.html">
                        <i class="fa fa-angle-right"></i>
                        Chat
                        <i class="fa fa-circle"></i>  
                    </a> 
                    <a class="menu-item" href="pageapp-login.html">
                        <i class="fa fa-angle-right"></i>
                         Log In
                        <i class="fa fa-circle"></i>                        
                    </a>     
                    <a class="menu-item" href="pageapp-signup.html">
                        <i class="fa fa-angle-right"></i>
                        Sign Up
                        <i class="fa fa-circle"></i>                        
                    </a>       
                    <a class="menu-item" href="pageapp-calendar.html">
                        <i class="fa fa-angle-right"></i>
                        Calendar
                        <i class="fa fa-circle"></i>                        
                    </a>  
                    <a class="menu-item" href="pageapp-timeline.html">
                        <i class="fa fa-angle-right"></i>
                         Timeline
                        <i class="fa fa-circle"></i>                        
                    </a>    
                    <a class="menu-item" href="pageapp-tasklist.html">
                        <i class="fa fa-angle-right"></i>
                        Tasklist
                        <i class="fa fa-circle"></i>                        
                    </a>     
                    <a class="menu-item" href="pageapp-checklist.html">
                        <i class="fa fa-angle-right"></i>
                        Checklist
                        <i class="fa fa-circle"></i>  
                    </a>                                           
                    <a class="menu-item" href="pageapp-reminders.html">
                        <i class="fa fa-angle-right"></i>
                        Reminders
                        <i class="fa fa-circle"></i>                        
                    </a>                                                 
                    <a class="menu-item" href="pageapp-coverpage.html">
                        <i class="fa fa-angle-right"></i>
                        Coverpage
                        <i class="fa fa-circle"></i>                        
                    </a>                                                                                                                   
                </div>
            </div>                  
            <div class="has-submenu">
                <a class="menu-item open-submenu" href="#"><!-- active-item -->
                    <i class="fa fa-shopping-cart"></i>
                    Store
                    <i class="fa fa-plus"></i>
                </a>
                <div class="submenu"><!--active-submenu-->
                    <a class="menu-item" href="store-front.html">
                        <i class="fa fa-angle-right"></i>
                        Storefront
                        <i class="fa fa-circle"></i>  
                    </a> 
                    <a class="menu-item" href="store-product-list.html">
                        <i class="fa fa-angle-right"></i>
                        Product List
                        <i class="fa fa-circle"></i>  
                    </a>  
                    <a class="menu-item" href="store-product-page.html">
                        <i class="fa fa-angle-right"></i>
                        Product Page
                        <i class="fa fa-circle"></i>                        
                    </a>                                                                         
                    <a class="menu-item" href="store-checkout.html">
                        <i class="fa fa-angle-right"></i>
                        Checkout Page
                        <i class="fa fa-circle"></i>                        
                    </a>                        
                    <a class="menu-item" href="store-history.html">
                        <i class="fa fa-angle-right"></i>
                         Purchase History
                        <i class="fa fa-circle"></i>                        
                    </a>                                                                   
                </div>
            </div>          
            <div class="has-submenu">
                <a class="menu-item open-submenu" href="#"><!-- active-item -->
                    <i class="fa fa-newspaper-o"></i>
                    News
                    <i class="fa fa-plus"></i>
                </a>
                <div class="submenu"><!--active-submenu-->
                    <a class="menu-item" href="news-front.html">
                        <i class="fa fa-angle-right"></i>
                        News Page
                        <i class="fa fa-circle"></i>  
                    </a> 
                    <a class="menu-item" href="news-article.html">
                        <i class="fa fa-angle-right"></i>
                        News Article
                        <i class="fa fa-circle"></i>  
                    </a>  
                    <a class="menu-item" href="news-article-list.html">
                        <i class="fa fa-angle-right"></i>
                        News Article List
                        <i class="fa fa-circle"></i>                        
                    </a>                             
                    <a class="menu-item" href="news-article-archive.html">
                        <i class="fa fa-angle-right"></i>
                        News Article Archive
                        <i class="fa fa-circle"></i>                        
                    </a>                                                                                                                
                </div>
            </div>             
            <div class="has-submenu">
                <a class="menu-item open-submenu" href="#"><!-- active-item -->
                    <i class="fa fa-pencil"></i>
                    Blog
                    <i class="fa fa-plus"></i>
                </a>
                <div class="submenu"><!--active-submenu-->
                    <a class="menu-item" href="page-blog.html">
                        <i class="fa fa-angle-right"></i>
                        Blog Page
                        <i class="fa fa-circle"></i>  
                    </a> 
                    <a class="menu-item" href="page-blog-post.html">
                        <i class="fa fa-angle-right"></i>
                        Blog Post
                        <i class="fa fa-circle"></i>  
                    </a>                                                                                                                  
                </div>
            </div> 
            <a class="menu-item" href="page-videos.html">
                <i class="fa fa-youtube-play"></i>
                Videos
                <i class="fa fa-circle"></i>
            </a>            
            <a class="menu-item" href="page-sitemap.html">
                <i class="fa fa-navicon"></i>
                Sitemap
                <i class="fa fa-circle"></i>
            </a>                         
            <a class="menu-item" href="contact.html">
                <i class="fa fa-envelope-o"></i>
                Contact
                <i class="fa fa-circle"></i>
            </a>               
            <a class="close-sidebar menu-item" href="#">
                <i class="fa fa-times"></i>
                Close
                <i class="color-red-dark fa fa-circle"></i>
            </a>                
        </div>
        <div class="sidebar-decoration"></div>
        <em class="sidebar-copyright">Copyright 2016. All Rights Reserved</em>
    </div>
</div>
      
<div class="sidebar-right">
    <div class="sidebar-scroll">
        <a href="#" class="sidebar-logo"></a>
        <div class="sidebar-divider">
            Let's get social
        </div>
        <div class="sidebar-menu">
            <a class="menu-item" href="#">
                <i class="fa fa-facebook"></i>
                Facebook
                <i class="fa fa-circle"></i>                        
            </a>            
            <a class="menu-item" href="#">
                <i class="fa fa-twitter"></i>
                Twitter
                <i class="fa fa-circle"></i>                        
            </a>            
            <a class="menu-item" href="#">
                <i class="fa fa-google-plus"></i>
                Google 
                <i class="fa fa-circle"></i>                        
            </a>   
        </div>
        <div class="sidebar-divider">
            GET IN TOUCH
        </div>
        <div class="sidebar-menu">
            <a class="menu-item" href="#">
                <i class="fa fa-phone"></i>
                Call Us
                <i class="fa fa-circle"></i>                        
            </a>            
            <a class="menu-item" href="#">
                <i class="fa fa-fax"></i>
                Fax Us
                <i class="fa fa-circle"></i>                        
            </a>            
            <a class="menu-item" href="#">
                <i class="fa fa-envelope-o"></i>
                Mail Us 
                <i class="fa fa-circle"></i>                        
            </a>            
        </div>
        <div class="sidebar-divider">
            SEND US A MESSAGE
        </div>
        <div class="sidebar-form contact-form no-bottom">
            <div class="formSuccessMessageWrap" id="formSuccessMessageWrap">
                Awesome! We'll get back to you!
            </div>
            <form action="php/contact.php" method="post" class="contactForm" id="contactForm">
                <fieldset>
                    <div class="formValidationError" id="contactNameFieldError">Name is required!</div>             
                    <div class="formValidationError" id="contactEmailFieldError">Mail address required!</div> 
                    <div class="formValidationError" id="contactEmailFieldError2">Mail address must be valid!</div> 
                    <div class="formValidationError" id="contactMessageTextareaError">Message field is empty!</div>   
                    <div class="formFieldWrap">
                        <input onfocus="if (this.value=='Name') this.value = ''" onblur="if (this.value=='') this.value = 'Name'" type="text" name="contactNameField" value="Name" class="contactField requiredField" id="contactNameField"/>
                    </div>
                    <div class="formFieldWrap">
                        <input onfocus="if (this.value=='Email') this.value = ''" onblur="if (this.value=='') this.value = 'Email'" type="text" name="contactEmailField" value="Email" class="contactField requiredField requiredEmailField" id="contactEmailField"/>
                    </div>
                    <div class="formTextareaWrap">
                        <textarea onfocus="if (this.value=='Message') this.value = ''" onblur="if (this.value=='') this.value = 'Message'" name="contactMessageTextarea" class="contactTextarea requiredField" id="contactMessageTextarea">Message</textarea>
                    </div>
                    <div class="formSubmitButtonErrorsWrap">
                        <input type="submit" class="buttonWrap button button-green contactSubmitButton no-bottom" id="contactSubmitButton" value="SUBMIT" data-formId="contactForm"/>
                    </div>
                </fieldset>
            </form>       
        </div>
        <div class="sidebar-decoration"></div>
        <em class="sidebar-copyright">Copyright 2016. All Rights Reserved</em>
    </div>
</div>

<div id="page-content"><!--Add sidebar-move to move with body-->
    <div id="page-content-scroll"><!--Enables this element to be scrolled -->
        <div class="header-mask">
            <a href="#"><i class="fa fa-times"></i></a>
            <a href="#"><i class="fa fa-bolt"></i></a>
            <a href="#"><i class="fa fa-times"></i></a>
            <div class="clear"></div>
        </div>
        
        <div class="content-strip">
            <div class="strip-content">
                <h4>Typography Features</h4>
                <p>Essential features for any product!</p>
                <i class="fa fa-bold"></i>
            </div>
            <div class="overlay"></div>
            <img class="preload-image" data-original="images/pictures/1.jpg" alt="img">
        </div>
        
        <div class="content">
            <div class="decoration"></div>
            
            <div class="container no-bottom">
                <h4>Clasic Columns</h4>
                <p>
                    Columns that always stay the same even if you're using a mobile or a tablet. Scroll below to see
                    columns that adapt to different resolutions
                </p>

                <div class="one-half">
                    <h5>1/2</h5>
                    <img class="preload-image responsive-image half-bottom" data-original="images/pictures/1.jpg">
                    <p>
                        This column is half the size of the screen, and will stay this way on mobile and tablets.
                    </p>
                </div>
                <div class="one-half last-column">
                    <h5>2/2</h5>
                    <img class="preload-image responsive-image half-bottom" data-original="images/pictures/2.jpg">
                    <p>
                        This column is half the size of the screen, and will stay this way on mobile and tablets.
                    </p>
                </div>
                <div class="clear"></div>

                <div class="one-third">
                    <h5>1/3</h5>
                    <img class="preload-image responsive-image half-bottom" data-original="images/pictures/3.jpg">
                    <p>
                        This column is half the size of the screen, and will stay this way on mobile and tablets.
                    </p>
                </div>                    
                <div class="one-third">
                    <h5>2/3</h5>
                    <img class="preload-image responsive-image half-bottom" data-original="images/pictures/1.jpg">
                    <p>
                        This column is half the size of the screen, and will stay this way on mobile and tablets.
                    </p>
                </div>
                <div class="one-third last-column">
                    <h5>3/3</h5>
                    <img class="preload-image responsive-image half-bottom" data-original="images/pictures/2.jpg">
                    <p>
                        This column is half the size of the screen, and will stay this way on mobile and tablets.
                    </p>
                </div>
                <div class="clear"></div>
            </div>

            <div class="decoration"></div>                

            <!-- Responsive Columns-->

            <div class="container">
                <h4>Responsive Columns</h4>
                <p>
                    These columns will adapt, on mobile devices they will show as rows, but on tablets
                    they will change into columns
                </p>

                <div class="one-half-responsive">
                    <h5>1/2</h5>
                    <img class="preload-image responsive-image half-bottom" data-original="images/pictures/1.jpg">
                    <p>
                        This column is half the size of the screen, and will stay this way on mobile and tablets.
                    </p>
                </div>
                <div class="one-half-responsive last-column">
                    <h5>2/2</h5>
                    <img class="preload-image responsive-image half-bottom" data-original="images/pictures/2.jpg">
                    <p>
                        This column is half the size of the screen, and will stay this way on mobile and tablets.
                    </p>
                </div>
                <div class="clear"></div>

                <div class="one-third-responsive">
                    <h5>1/3</h5>
                    <img class="preload-image responsive-image half-bottom" data-original="images/pictures/3.jpg">
                    <p>
                        This column is half the size of the screen, and will stay this way on mobile and tablets.
                    </p>
                </div>                    
                <div class="one-third-responsive">
                    <h5>2/3</h5>
                    <img class="preload-image responsive-image half-bottom" data-original="images/pictures/1.jpg">
                    <p>
                        This column is half the size of the screen, and will stay this way on mobile and tablets.
                    </p>
                </div>
                <div class="one-third-responsive last-column">
                    <h5>3/3</h5>
                    <img class="preload-image responsive-image half-bottom" data-original="images/pictures/2.jpg">
                    <p>
                        This column is half the size of the screen, and will stay this way on mobile and tablets.
                    </p>
                </div>
                <div class="clear"></div>
            </div>

            <div class="decoration"></div>

            <!--Dropcaps-->

            <div class="container">

                <h4>Dropcaps</h4>
                <p>
                    For delivering news or book styled content, dropcaps are gorgeous and easy to use.
                </p>

                <p class="dropcaps-1 one-half-responsive">
                    Aorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius dui et erat aliquet rutrum. Nunc vitae tincidunt magna. In vitae efficitur enim. Fusce a augue mi. Vivamus a nunc in ante semper iaculis
                </p>                     
                <p class="dropcaps-2 one-half-responsive last-column">
                    Borem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius dui et erat aliquet rutrum. Nunc vitae tincidunt magna. In vitae efficitur enim. Fusce a augue mi. Vivamus a nunc in ante semper iaculis
                </p>                    
                <p class="dropcaps-3 one-half-responsive">
                    Corem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius dui et erat aliquet rutrum. Nunc vitae tincidunt magna. In vitae efficitur enim. Fusce a augue mi. Vivamus a nunc in ante semper iaculis
                </p>                    
                <p class="dropcaps-4 one-half-responsive last-column">
                    Dorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius dui et erat aliquet rutrum. Nunc vitae tincidunt magna. In vitae efficitur enim. Fusce a augue mi. Vivamus a nunc in ante semper iaculis
                </p>
            </div>

            <div class="decoration"></div>

            <!-- Text Highlights -->

            <div class="container">
                <h4>Text Highlights</h4>
                <p>
                    Text highlights are an extremly easy way to show something off or to make your text stand out when 
                    bold just isn't enough!
                </p>
                <div class="container">
                    <p class="half-bottom one-half-responsive            "><span class="highlighted bg-red-dark color-white">Highlighting text</span> is really easy to use!</p>
                    <p class="half-bottom one-half-responsive last-column"><span class="highlighted bg-green-dark color-white">Highlighting text</span> is really easy to use!</p>
                    <p class="half-bottom one-half-responsive            "><span class="highlighted bg-blue-dark color-white">Highlighting text</span> is really easy to use!</p>
                    <p class="half-bottom one-half-responsive last-column"><span class="highlighted bg-night-dark color-white">Highlighting text</span> is really easy to use!</p>
                    <p class="half-bottom one-half-responsive            "><span class="highlighted bg-magenta-dark color-white">Highlighting text</span> is really easy to use!</p>
                    <p class="half-bottom one-half-responsive last-column"><span class="highlighted bg-orange-dark color-white">Highlighting text</span> is really easy to use!</p>
                </div>
            </div>   

            <!-- List Styles -->

            <div class="decoration"></div>

            <div class="container">
                <h4>List styles</h4>
                <p>
                    Text highlights are an extremly easy way to show something off or to make your text stand out when 
                    bold just isn't enough!
                </p>
                <div class="one-third-responsive">
                    <h5>Unordered List</h5>
                    <p>
                        With 3 level nested elements
                    </p>
                    <ul>
                        <li>List Item 1</li>
                        <li>List Item 2</li>
                        <ul>
                            <li>List Nested 1 </li>
                            <li>List Nested 2 </li>
                            <ul>
                                <li>List Nested Nested 1</li>
                                <li>List Nested Nested 2</li>
                                <li>List Nested Nested 3</li>
                            </ul>
                            <li>List Nested 3 </li>
                        </ul>
                        <li>List Item 3</li>
                    </ul>          
                </div>

                <div class="one-third-responsive">
                    <h5>Ordered List</h5>
                    <p>
                        With 3 level nested elements
                    </p>
                    <ol>
                        <li>List Item</li>
                        <li>List Item</li>
                        <ol>
                            <li>List Nested 1</li>
                            <li>List Nested 2</li>
                            <ol>
                                <li>List Nested Nested 1</li>
                                <li>List Nested Nested 2</li>
                                <li>List Nested Nested 3</li>
                            </ol>
                            <li>List Nested 3</li>
                        </ol>
                        <li>List Item</li>
                    </ol>    
                </div>
                <div class="one-third-responsive last-column">
                    <h5>Icons List</h5>
                    <p>
                        With 3 level nested elements
                    </p>
                    <ul class="icon-list">
                        <li><i class="fa fa-caret-right"></i> List Item</li>
                        <li><i class="fa fa-caret-down"></i> List Item</li>
                        <ul class="icon-list">
                            <li><i class="fa fa-facebook"></i> List Item</li>
                            <li><i class="fa fa-twitter"></i> List Item</li>
                            <ul class="icon-list">
                                <li><i class="fa fa-user"></i> List Item</li>
                                <li><i class="fa fa-lock"></i> List Item</li>
                                <li><i class="fa fa-cog fa-spin"></i> List Item</li>
                            </ul>
                            <li><i class="fa fa-laptop"></i> List Item</li>
                        </ul>
                        <li><i class="fa fa-caret-up"></i> List Item</li>
                    </ul>
                </div>
            </div>


            <div class="decoration"></div>

            <div class="container">
                <h4>Checkboxes and Radios</h4>
                <p>
                    Checkboxes and radios styled by default. 
                </p>
                <form class="one-half">
                    <input id="check-label-1" class="checkbox" type="checkbox"><label class="checkbox-label" for="check-label-1">Checkbox</label>
                    <input id="check-label-2" class="checkbox" type="checkbox"><label class="checkbox-label" for="check-label-2">Checkbox 2</label>
                </form>        

                <form class="one-half last-column">
                    <input id="radio-label-1" class="radiobox" type="radio"><label class="radio-label" for="radio-label-1">Radio Button</label>
                    <input id="radio-label-2" class="radiobox" type="radio"><label class="radio-label" for="radio-label-2">Radio Button 2</label>
                </form>
                <div class="clear"></div>
            </div>

            <div class="decoration"></div>

            <div class="container">
                <div class="one-third-responsive full-bottom">
                    <h5>Regular Input Fields</h5>
                    <p>
                        Simple fields that clear on focus, and with on focus effects.
                    </p>
                    <input class="text-field green-field" onfocus="if (this.value=='Good Field') this.value = ''" onblur="if (this.value=='') this.value = 'Good Field'" type="text"  value="Good Field">
                    <input class="text-field green-field" onfocus="if (this.value=='password') this.value = ''" onblur="if (this.value=='') this.value = 'password'" type="password" value="password">
                    <input class="text-field red-field" onfocus="if (this.value=='Bad Field') this.value = ''" onblur="if (this.value=='') this.value = 'Bad Field'" type="text" value="Bad Field">
                    <input class="text-field red-field" onfocus="if (this.value=='password') this.value = ''" onblur="if (this.value=='') this.value = 'password'" type="password" value="password">
                </div>
                <div class="decoration hide-if-responsive"></div>
                <div class="one-third-responsive full-bottom">
                    <h5>Icon Input Fields</h5>
                    <p>
                        Simple fields that clear on focus, with effects and icons.
                    </p>
                    <div class="icon-field">
                        <i class="fa fa-user"></i>
                        <input class="text-field green-field" onfocus="if (this.value=='Good Field') this.value = ''" onblur="if (this.value=='') this.value = 'Good Field'" type="text" value="Good Field">
                    </div>
                    <div class="icon-field">
                        <i class="fa fa-lock"></i>
                        <input class="text-field green-field" onfocus="if (this.value=='password') this.value = ''" onblur="if (this.value=='') this.value = 'password'" type="password" value="password">
                    </div>
                    <div class="icon-field">
                        <i class="fa fa-envelope"></i>
                        <input class="text-field red-field" onfocus="if (this.value=='Bad Field') this.value = ''" onblur="if (this.value=='') this.value = 'Bad Field'" type="text"  value="Bad Field">
                    </div>
                    <div class="icon-field">
                        <i class="fa fa-unlock"></i>
                        <input class="text-field red-field" onfocus="if (this.value=='password') this.value = ''" onblur="if (this.value=='') this.value = 'password'" type="password" value="password">
                    </div>
                </div>           
                <div class="decoration hide-if-responsive"></div>
                <div class="one-third-responsive last-column full-bottom">
                    <h5>Text and Icon Input Fields</h5>
                    <p>
                        Simple fields that clear on focus, with effects and icons.
                    </p>
                    <div class="text-icon-field">
                        <i class="fa fa-user"></i>
                        <h6>Username</h6>
                        <em>*required</em>
                        <input class="text-field green-field" onfocus="if (this.value=='Good Field') this.value = ''" onblur="if (this.value=='') this.value = 'Good Field'" type="text" value="Good Field">
                    </div>
                    <div class="text-icon-field">
                        <i class="fa fa-lock"></i>
                        <h6>Password</h6>
                        <em>*required</em>
                        <input class="text-field green-field" onfocus="if (this.value=='password') this.value = ''" onblur="if (this.value=='') this.value = 'password'" type="password" value="password">
                    </div>
                </div>  

            </div>
            <div class="decoration"></div>

            <div class="container no-bottom">
                <h4>Simple Table</h4>
                <p>And it's pure CSS3! That means just fill in the data, and the table expands to fit the size you need!</p>
                <table cellspacing='0' class="table">
                    <tr>
                        <th>TABLE</th>
                        <th class="table-title">PLUS</th>
                        <th class="table-title">PRO</th>
                    </tr>
                    <tr>
                        <td class="table-sub-title"> ONE</td>
                        <td>Yes</td>
                        <td>Yes</td>
                    </tr>
                    <tr class='even'>
                        <td class="table-sub-title"> TWO</td>
                        <td>No</td>
                        <td>Yes</td>
                    </tr>
                    <tr>
                        <td class="table-sub-title"> THREE</td>
                        <td>No</td>
                        <td>No</td>
                    </tr>
                    <tr class='even'>
                        <td class="table-sub-title">VALUE</td>
                        <td class="price">$9.<sup class="small-price">99</sup></td>
                        <td class="price">$109.<sup class="small-price">99</sup></td>
                    </tr>       
                 </table>
            </div>
            <div class="decoration"></div>


            <div class="quote-5 container">
                <p>
                    This is the classic , standard blockquote design, that everyone uses
                    and it's fantasticly easy to use. Just a class, and an author!
                </p>
                <strong>Enabled | ThemeForest</strong>
            </div>

            <div class="decoration"></div>

            <div class="quote-2 container">
                <p class="quote-box">
                    <img class="quote-image preload-image" data-original="images/pictures/1t.jpg" alt="img">
                    <strong class="quote-author">Alexander Stranger</strong>
                    <em class="quote-rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </em>
                </p>
                <div class="clear"></div>
                <p class="quote-text">
                    The template is beautiful, easy to use, and very well documented, but the best has been 
                    the customer support. Prompt, helpful replies.
                </p>
                <em class="quote-title">January, 25, 2040 - ThemeForest Item</em>
            </div>                    

            <div class="decoration"></div>

            <div class="quote-1 container">
                <img class="quote-image preload-image" data-original="images/pictures/3t.jpg" alt="img">
                <strong class="quote-author">Alexander Stranger</strong>
                <div class="quote-rating">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                </div>
                <em class="quote-title">January, 25, 2040 - ThemeForest Item</em>
                <em class="quote-text">
                    The template is beautiful, easy to use, and very well documented, but the best has been the 
                    customer support. Very prompt replies and helpful.
                </em>
            </div>    

            <div class="decoration"></div>

            <div class="quote-3 container">
                <i class="fa fa-quote-left"></i>
                <p>
                    Great product as always plus good team and wonderful support. 
                    Worth 5 stars and more. Please keep up the great work.    
                </p>
                <strong class="quote-author">Alexander Stranger</strong>
            </div>

            <div class="decoration"></div>

            <div class="quote-4 container">
                <i class="fa fa-quote-right"></i>
                <p>
                    Great product as always plus good team and wonderful support. 
                    Worth 5 stars and more. Please keep up the great work.    
                </p>
                <strong class="quote-author">Alexander Stranger</strong>
            </div>

            <div class="decoration"></div>

            <div class="container">
                <div class="review-6">
                    <h4>
                        <i class="fa fa-quote-right"></i> 
                        Worth 5 stars for code quality, design, and documentation. 
                        Keep your hard work and produce more quality themes! I'm so 
                        happy with my purchase!
                    </h4>
                    <div class="review-stars">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <strong>ThemeForest Buyer</strong>
                </div>                    
            </div>

            <div class="decoration"></div>

            <div class="container">
                <div class="one-half-responsive">
                    <div class="review-4">
                        <img class="preload-image" data-original="images/pictures/1t.jpg" alt="img">
                        <h4>Alexander Q.</h4>
                        <div class="review-stars">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        </div>
                        <div class="clear"></div>
                        <p>
                            <strong>PROS:</strong>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia mauris est. 
                            Etiam eget sollicitudin augue, ut tristique lectus.
                        </p>                        
                        <p>
                            <strong>CONS:</strong>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia mauris est. 
                            Etiam eget sollicitudin augue, ut tristique lectus.
                        </p>                        
                        <p>
                            <strong>OVERALL:</strong>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia mauris est. 
                            Etiam eget sollicitudin augue, ut tristique lectus.
                        </p>
                    </div>     
                </div>   
                <div class="decoration hide-if-responsive"></div>
                <div class="one-half-responsive last-column">
                    <div class="review-5">
                        <img class="preload-image" data-original="images/pictures/3t.jpg" alt="img">
                        <h4>Marcus W.</h4>
                        <div class="review-stars">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        </div>
                        <div class="clear"></div>
                        <p>
                            <strong>PROS:</strong>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia mauris est. 
                            Etiam eget sollicitudin augue, ut tristique lectus.
                        </p>                        
                        <p>
                            <strong>CONS:</strong>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia mauris est. 
                            Etiam eget sollicitudin augue, ut tristique lectus.
                        </p>                        
                        <p>
                            <strong>OVERALL:</strong>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia mauris est. 
                            Etiam eget sollicitudin augue, ut tristique lectus.
                        </p>
                    </div>     
                </div>
            </div>

            <div class="decoration"></div>

            <div class="container">
                <div class="review-1 container one-half-responsive">
                    <strong>5.00</strong><em>John Doe Said:</em>
                    <br>
                    <div class="review-stars">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <img class="review-image preload-image" data-original="images/pictures/1t.jpg" alt="img">
                    <p>
                        The best support I have ever had. They are on top of things and with very fast and accurate replies. I will continue to purchase items as needed and will gladly recommend there service to anyone. I would give them 10 stars if I could. Keep up the great work and even better service.
                    </p>
                    <a href="#">By aboyington on <u>Swipebox Mobile & Tablet</u></a>
                </div>                

                <div class="decoration hide-if-responsive"></div>

                <div class="review-2 container one-half-responsive last-column">
                    <strong>5.00</strong>
                    <div class="review-stars">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <em>Average Rating</em>
                    <img class="review-image preload-image" data-original="images/pictures/2t.jpg" alt="img">
                    <br>
                    <p>
                        The best support I have ever had. They are on top of things and with very fast and accurate replies. I will continue to purchase items as needed and will gladly recommend there service to anyone. I would give them 10 stars if I could. Keep up the great work and even better service.
                    </p>
                    <a href="#">By aboyington on <u>Swipebox Mobile & Tablet</u></a>
                </div>
            </div>

            <div class="decoration"></div>

            <div class="container">
                <div class="review-3">
                    <div class="one-half-responsive">
                        <h4>John Doe said:</h4>
                        <h5>A few words from our customer</h5>
                        <p>
                            The best support I have ever had. They are on top of things and with very fast and accurate replies. I will continue to purchase items as needed and will gladly recommend there service to anyone. I would give them 10 stars if I could. Keep up the great work and even better service.
                        </p>
                    </div>
                    <div class="one-half-responsive last-column">
                        <div class="review-line">
                            <strong>Performance</strong>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        </div>                        
                        <div class="review-line">
                            <strong>Documentation</strong>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        </div>                        
                        <div class="review-line">
                            <strong>Loading Speed</strong>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        </div>                        
                        <div class="review-line">
                            <strong>Code Quality </strong>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        </div>                            
                        <div class="review-line">
                            <strong>No Stars Here </strong>
                            <i class="fa fa-star-o"></i>
                            <i class="fa fa-star-o"></i>
                            <i class="fa fa-star-o"></i>
                            <i class="fa fa-star-o"></i>
                            <i class="fa fa-star-o"></i>
                        </div>
                        <div class="review-line-last">
                            <strong>Overall Rating</strong>
                            <i class="fa fa-star-o"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        </div>    
                    </div>
                    <div class="clear"></div>
                </div>                   
            </div>
                        
            <div class="decoration"></div>
        </div>
        
        <div class="footer">
            <div class="footer-content">
                <h3 class="footer-logo">BOLT</h3>
                <p class="footer-text">
                    We aim to simplify your life by creating a beautiful and simple product that's feature rich and easy to use!
                </p>
            </div>
            <div class="footer-socials">
                <a href="#" class="scale-hover facebook-color"><i class="fa fa-facebook"></i></a>
                <a href="#" class="scale-hover twitter-color"><i class="fa fa-twitter"></i></a>
                <a href="#" class="scale-hover google-color"><i class="fa fa-google-plus"></i></a>
                <a href="#" class="scale-hover phone-color"><i class="fa fa-phone"></i></a>
                <a href="#" class="scale-hover mail-color"><i class="fa fa-envelope-o"></i></a>
                <a href="#" class="scale-hover bg-night-dark back-to-top"><i class="fa fa-angle-up"></i></a>
                <div class="clear"></div>
            </div>
            <div class="footer-decoration"></div>
            <p class="footer-strip">Copyright <span id="copyright-year"></span> Enabled. All Rights Reserved</p>
        </div>
    </div>
    <a href="#" class="back-to-top-badge"><i class="fa fa-caret-up"></i>Back to top</a>
</div>



<div class="body-background"></div>
</body>










